<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性的用法</title>
	</head>
		<style type="text/css">table.gridtable {
			font-family: verdana, arial, sans-serif;
			font-size: 11px;
			color: #333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}

		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}

		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}
	</style>
	<body>
		<div id="app">
			<table class="gridtable">
				<tr>
					<th>学科</th>
					<th>分数</th>
				</tr>
				<tr>
					<td>语文</td>
					<td><input type="text" name="" id="" v-model.number="chinese" /></td>
				</tr>
				<tr>
					<td>数学</td>
					<td><input type="text" name="" id="" v-model.number="math" /></td>
				</tr>
				<tr>
					<td>英语</td>
					<td><input type="text" name="" id="" v-model.number="english" /></td>
				</tr>
				<tr>
					<td>总分</td>
					<td><input type="text" name="" id="" v-model.number="sum" /></td>
				</tr>
				<tr>
					<td>平均分</td>
					<td><input type="text" name="" id="" v-model.number="average" /></td>
				</tr>
			</table>
		</div>
			<script src="../js/Vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					chinese: 90,
					math: 80,
					english: 90,
				},
				computed: {
					sum: function() {
						return this.chinese + this.math + this.english;
					},
					average: function() {
						return Math.round(this.sum / 3);
					}
				}
			})
		</script>

	</body>
</html>
